<template>
  <div class="mui-off-canvas-wrap mui-draggable" style="position: absolute">
    <sidebar :class="sideShow?'showS':'hideS'" class="s"></sidebar>
    <!--主界面-->
    <div class="mui-inner-wrap" ref="main" :style="sideStyle">
      <header class="mui-bar mui-bar-nav ucenter">
        <div class="mui-pull-left l"  @click="showSide">
          <i class="iconfont icon-menu mui-icon-bars"></i>
        </div>
        <div class="mui-pull-right r">
          <i class="iconfont icon-fenxiang mui-icon-bars"></i>
        </div>
        <h1 class="mui-title">捕光</h1>
      </header>
      <transition name="router-slid" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
      <div class="mui-off-canvas-backdrop" @click="hideSide" v-if="sideShow"></div>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import {login} from '../../service/getData'
  import {getStore, setStore, removeStore} from '../../config/mUtils'
  import loading from '../../components/common/loading'
  import sidebar from '../../components/common/sidebar'

  export default {
    data(){
      return{
        sideShow:false,
        w:0,
        sideStyle:''
      }
    },

    mounted(){
      this.w = window.innerWidth;
    },
    watch:{

    }
    ,
    components:{
      loading,sidebar
    },

    computed:{

    },

    methods:{
      showSide(){
        let _this = this;
        _this.sideShow = true;
        _this.sideStyle = 'transform: translate3d('+parseInt(this.w) * 0.7 +'px, 0px, 0px);';
      }
      ,
      hideSide(){
        let _this = this;
        _this.sideShow = false;
        _this.sideStyle = 'transform: translate3d(0px, 0px, 0px);';
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../../style/mui.min.css';
  .router-right-enter-active, .router-right-leave-active {
    transition: opacity .3s;
  }
  .router-right-enter, .router-right-leave {
    opacity: 0;
  }
  .mui-inner-wrap{
    -webkit-transition: transform .3s linear;
    transition: transform .3s linear;
  }
  .s{
    visibility: visible!important;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
  }
  .showS{
    opacity: 1;
  }
  .hideS{
    opacity: 0;
  }
  .ucenter{
    height: 3rem;
    padding: 0 .8rem;
    background-color: #F4F4F4;
    box-shadow: 0 1px 1px #e2e2e2;
    .l{
      height: 100%;
      min-width: 2rem;
    }
    i{
      font-size: 1.15rem;
      position: relative;
      top: 1.1rem;
    }
    .mui-title{
      font-size: 0.95rem;
      top: .55rem;
      left: 2rem;
      right: 2rem;
    }
  }
  .mui-off-canvas-backdrop {
    position: absolute;
    z-index: 998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    transition: background 350ms cubic-bezier(.165,.84,.44,1);
    background: rgba(0,0,0,.4);
    box-shadow: -4px 0 4px rgba(0,0,0,.5), 4px 0 4px rgba(0,0,0,.5);
    -webkit-tap-highlight-color: transparent;
  }
</style>
